<template>
	<view class="myCard">
		<view class="listItem y-c" v-for="(i,index) in list" :key="index" @click="goDetails(i.id)">
			<view class="item_top y-c ">
				<view class="item_top_row x-bc ">
					<view>{{i.title}}</view>
					<view class="circle" v-if="i.is_read === '0'"></view>
				</view>
			</view>
			<view class="item_bot y-c" >
				<view class="item_top_row x-bc mb-1 mt-1">
					<view class="next">{{i.createtime}}</view>
				</view>
			</view>
		</view>
		<view class="noMore" v-if="last_page==form.page&&list.length!=0"
			style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 60rpx;">
			数据加载完成
		</view>
		<u-empty text="暂无列表哦~~" mode="list" v-if="list.length==0" margin-top='50'></u-empty>
	</view>
</template>

<script>
	import {
		messageList
	} from '@/request/api.js'
	export default {
		data() {
			return {
				list: [],
				form: {
					page: 1,
					type_data: 1
				},
				last_page: 1,
			}
		},
		onReachBottom() {
			// console.log(111)
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.getList()
			}
		},
		onShow() {
			this.form.page = 1
			this.list = []
			this.getList()
		},
		methods: {
			async getList() {
				let res = await messageList(this.form)
				this.list = this.list.concat(res.data.data)
				this.last_page = res.data.last_page
				console.log(this.list, 'list')
			},
			goDetails(i) {
				console.log(i)
				uni.navigateTo({
					url: '/my_pages/infoDetails/infoDetails?id='+i
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myCard {
		padding: 40rpx;
		.circle{
			width: 6px;
			height: 6px;
			background: #FF6666;
			    border-radius: 50%;
		}
		.listItem {
			color: $common-color;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.item_over {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}

		.border {
			border-bottom:  0.5rpx solid rgba(217, 217, 217, 0.6);
		}
		.item_bot{
			.next{
				color: #BABABA;
			}
			.image{
				width: 116rpx;
				height: 100rpx;
			}
		}
		
	}
</style>